<template>
	<view class="wrap">
		<u-navbar :custom-back="$back" :back-icon-color="navbar.titleColor" is-back :title="navbar.title"
			:background="navbar.background" :title-color="navbar.titleColor">
		</u-navbar>
		<u-tabs :list="list" :is-scroll="true" :current="params.page" @change="change" class="scrollable"></u-tabs>
		<view class="content">
			
				<view class="content-list">
					<view class="content-box">
						<view class="content-item" @click="goDetail(item)" v-for="item in dataList">
							<view class="item-row">
								<view class="item-row-title">
								  <view class="image-wrapper">
									<image src="https://zh.xinplz.com:8093/xinpengservice/staticResources/show/1266446434819899392/ic_visitor_ren.png" style="width: 18px;" alt="">
								  </view>
								  <text class="text">{{item.visitName}}</text>
								</view>
								<!-- 状态 -->
								<text v-for="item2,index in totalList" :key="item2.name" v-if="item.visitorInfoStatus == item2.value" :style="'background-color:' + item2.color + ';color:#FFF;padding: 10rpx;font-size: 25upx;'">{{item2.name}}</text>
							</view>
							<view class="item-row">
								<text class="item-huise"><text class="item-huise-title">来访时间：</text>{{item.visitDate}} {{item.visitTimePoint}}</text>
							</view>
							<view class="item-row">
								<text class="item-huise"><text class="item-huise-title">被访人名称：</text>{{item.visitPersonName}}</text>
							</view>
							<view class="item-row">
								<text class="item-huise"><text class="item-huise-title">被访人电话：</text>{{item.visitPersonPhone}}</text>
							</view>
							<view class="item-row">
								<text class="item-huise"><text class="item-huise-title">来访事由：</text>{{item.visitSubjectMatter}}</text>
							</view>
						<view class="item-row">
							<text class="item-huise">
								<text class="item-huise-title">录入类型：</text>
								{{item.filledUserType == 0 ? '访客录入' : '后台录入'}}
							</text>
							<text class="item-huise" v-if="item.filledUserType == 1">
								<text class="item-huise-title">录入人员：</text>
								{{item.filledUserName}}
							</text>
						</view>
							<view class="item-row" v-if="item.visitorInfoStatus == 3">
								<text class="item-huise"><text class="item-huise-title">实际到访时间：</text>{{item.realityVisitTime}}</text>
							</view>
							<view class="item-row">
								<text	v-if="item.visitorInfoStatus == 0 && (allowCheck || refuseCheck)" class="item-huise"><text class="item-huise-title">操作：</text></text>
								<button v-if="item.visitorInfoStatus == 0 && allowCheck" @click.stop.prevent="allow(item)"
									style="margin-right: -200upx;line-height:2;" type="primary" size="mini">设为审批通过</button>
								<button v-if="item.visitorInfoStatus == 0 && refuseCheck" @click.stop.prevent="refuse(item)"
									style="margin-right: 0;line-height:2;" type="warn" size="mini">设为未通过</button>
							</view>
						</view>
					</view>
				</view>
			
		</view>
		<view class="footer">
			<!-- <view>查看定期</view> -->
			<!-- <view @click="$back">返 回</view> -->
			<view @click="goAddOpen" v-if="visitorAddCheck">录入预约申请</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>
<script>
	export default {
		props: {
			deviceId: {
				type: String
			}
		},
		data() {
			return {
				//头部标题配置
				navbar: {
					title: "访客预约列表",
					background: {
						backgroundColor: '#2373FA',
					},
					titleColor: "#ffffff",
				},
				params: {
					page: 0,
					pageNum: 1,
					pageSize: 20,
					visitorInfoStatus: null,
				},
				dataList: [],
				list: [{
					name: '全部',
					value: null
				},{
					name: '未审核',
					value: 0
				}, {
					name: '未通过',
					value: 1
				}, {
					name: '待来访',
					value: 2
				}, {
					name: '已来访',
					value: 3
				}, {
					name: '未审过期',
					value: 4
				}, {
					name: '已审过期',
					value: 5
				}, {
					name: '已离园',
					value: 6
				}],
				totalList: [{
					name: '未审核',
					value: 0,
					valueNum: 0,
					color: '#FFAA01'
				}, {
					name: '未通过',
					value: 1,
					valueNum: 0,
					color: '#FF3939'
				}, {
					name: '待来访',
					value: 2,
					valueNum: 0,
					color: '#13B3FD'
				}, {
					name: '已来访',
					value: 3,
					valueNum: 0,
					color: '#469D50'
				}, {
					name: '未审过期',
					value: 4,
					valueNum: 0,
					color: '#505050'
				}, {
					name: '已审过期',
					value: 5,
					valueNum: 0,
					color: '#505050'
				}, {
					name: '已离园',
					value: 6,
					valueNum: 0,
					color: '#0055ff'
				}],
				status: 'loadmore',
				visitorAddCheck: false,
				allowCheck: false,
				refuseCheck: false,
			};
		},
		//上拉加载更多
		onReachBottom() {
			if (this.status == 'nomore') return
			this.params.pageNum += 1;
			this.getData();
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.status != "loadmore") {
				this.setSize()
				this.getData();
				setTimeout(() => {
					uni.stopPullDownRefresh();
				}, 500)
			}
		},
		onLoad(options) {
			if(options.visitorInfoStatus){
				this.params.page = parseInt(options.visitorInfoStatus) + 1;
				this.params.visitorInfoStatus = options.visitorInfoStatus;
			}
		},
		mounted() {

		},
		onShow() {
			this.initPermissions()
			this.setSize()
			this.getData()
		},
		methods: {
			// 初始化权限
			initPermissions(){
				this.visitorAddCheck = false,
				this.allowCheck = false,
				this.refuseCheck = false,
				this.$u.api.getInfo().then(res => {
					let permissions = res.permissions;
					for (var i = 0; i < permissions.length; i++) {
						let permission = permissions[i];
						if(permission == 'visitor:visitorInfo:add'){
							this.visitorAddCheck = true;
						}
						if(permission == 'visitor:visitorInfo:allow'){
							this.allowCheck = true;
						}
						if(permission == 'visitor:visitorInfo:refuse'){
							this.refuseCheck = true;
						}
					}
				})	
			},
			change(index) {
				this.params.page = index;
				this.params.visitorInfoStatus = this.list[index].value;
				this.setSize()
				this.getData()
			},

			getData() {
				this.status = 'loading'
				let params = {
					page: this.params.page,
					pageNum: this.params.pageNum,
					pageSize: this.params.pageSize,
					visitorInfoStatus: this.params.visitorInfoStatus
				}
				console.log('params1',params);
				if(params.visitorInfoStatus == null){
					params = {
						page: this.params.page,
						pageNum: this.params.pageNum,
						pageSize: this.params.pageSize
					}
				}
				console.log('params2',params);
				this.$u.api.visitor.list(params).then(res => {
					if (res.total <= (this.params.pageSize * this.params.pageNum))
						this.status = 'nomore'
					res.rows.map(d => {
						this.dataList.push(d)
					})
				})
			},
			//重置页码
			setSize() {
				this.dataList = []
				this.status = 'loadmore'
				this.params.pageNum = 1
				this.params.pageSize = 8
			},
			goAddOpen() {
				uni.navigateTo({
					url: "/subPages/visitor/add"
				})
			},
			refuse(item) {
				// 调用审批不通过接口
				this.$u.api.visitor.refuse({'visitorInfoId':item.visitorInfoId}).then(async res => {
					console.log(res)
					this.setSize()
					this.getData()
				})
			},
			allow(item) {
				// 调用审批通过接口
				this.$u.api.visitor.allow({'visitorInfoId':item.visitorInfoId}).then(async res => {
					console.log(res)
					this.setSize()
					this.getData()
				})
			},
			goDetail(item) {
				setTimeout(() => {
					uni.navigateTo({
						url: `/subPages/visitor/visitorInfoDetail?visitorInfoId=${item.visitorInfoId}`
					})
				}, 300)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f4f8;
	}

	.wrap {
		padding-bottom: 100upx;
		overflow: hidden;
		
		.scrollable {
			overflow-x: auto; /* 水平方向上内容超出时显示滚动条 */
			white-space: nowrap; /* 确保内容不会换行 */
		}
		
		.content {
			
			.content-list {
			
				.content-header {
					display: flex;
					justify-content: space-between;
					padding: 15upx;
					font-size: 35upx;
					font-weight: bold;
				}
			
				.content-box {
					padding: 0 15upx 15upx 15upx;
					font-size: 30upx;
					font-weight: bold;
			
					.content-item {
						background-color: #fff;
						border-radius: 5px;
						padding: 10px;
						position: relative;
						border-top: 1px solid #f2f4f8;
						margin-top: 15upx;
						display: flex;
						flex-direction: column;
						box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			
						>text {
							position: absolute;
							right: -15upx;
							top: 0;
							background-color: #B9E1FB;
							color: #2B96C6;
							font-size: 25upx;
							padding: 5upx 10upx;
							border-bottom-left-radius: 5px;
						}
			
						.item-row {
							display: flex;
							justify-content: space-between;
							height: 25px;
							align-items: center;
			
							&:first-child {
								border-bottom: 1px solid #f2f4f8;
							}
							
							.item-row-title{
								font-size: 25upx;
								display: flex;
								align-items: center; /* 垂直居中 */
								justify-content: center; /* 水平居中 */
								
								.image-wrapper {
								  margin-right: 0px; /* 可以调整间距 */
								}
								image {
									width: 40rpx;height: 40rpx;
								}
							}
			
							.item-huise {
								font-size: 20upx;
								color: #9e9d9a;
								
								.item-huise-title {
									font-size: 20upx;
								}
								
							}
			
							.noSX {
								flex-shrink: 0;
							}
			
							/deep/.u-progress {
								flex: 1;
								height: 8px !important;
								margin: 0 10px;
							}
			
							.gao {
								background-color: #ffaa00;
								border-radius: 10rpx;
								padding: 0 10rpx;
								display: inline-block;
								color: #fff;
								font-size: 25upx;
								line-height: 40upx;
								font-weight: 100;
								text-align: center;
								margin-right: 10upx;
							}
			
							.priority1 {
								background-color: #4CB2DB;
							}
			
							.priority2 {
								background-color: #fa3534;
							}
			
							/deep/.u-tag {
								margin-left: 10upx;
								padding: 4px;
								font-size: 11px;
							}
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80upx;
			width: 100%;
			z-index: 999;

			>view {
				border-right: 1px solid #CDCDCD;
				background-color: #f2f4f8;
				flex: 1;
				color: #252525;
				font-size: 30upx;
				font-weight: bold;
				text-align: center;
				height: 80upx;
				line-height: 80upx;

				&:last-child {
					border-right: none;
					color: #fff;
					background-color: #019FE6;
				}
			}
		}
	}
</style>